<%--
  Created by IntelliJ IDEA.
  User: 86131
  Date: 2023/8/21
  Time: 10:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>注册</title>
    <script rel="script" src="${path}/js/jquery-3.6.4.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/css/enroll.css">
</head>
<body>
<div class="de1">
    <div><img src="${path}/images/login/logo.png" class="de2"/></div>
    <div><img src="${path}/images/login/phone.png" class="de3"/></div>
    <div class="de4">
        <form id="J-userexinfo-form" class="userexinfo-form" enctype="multipart/form-data"  method="post" action="${path}/UserServlet?prom=add" onsubmit="return check()    ">
            <div class="userexinfo-form-section">
                <p>
                    <img id="moviePirture" src="${path}/images/login/jia.png" >
                </p>
                <span>
                    <input type="button" value="选择头像" class="btn">
                    <input id="file" type="file" name="images" value="选择头像">
                </span>
            </div>
            <div class="userexinfo-form-section">
                <p>昵称：</p>
                <span>
                    <input type="text" name="nickName" id="userexinfo-form-nickname" class="ui-checkbox" placeholder="2-15个字，支持中英文、数字">
                </span>
            </div>
            <div class="userexinfo-form-section">
                <p>性别：</p>
                <input type="radio" name="sex" value="1">男
                <input type="radio" name="sex" value="2">女
            </div>
            <div class="date-picker userexinfo-form-section ">
                <p>生日：</p>
                <span><input type="date" name="birth" class="ui-birth" id="birth"></span>
            </div>
            <div class="userexinfo-form-section">
                <p>生活状态：</p>
                <input type="radio" name="sh" value="1">单身
                <input type="radio" name="sh" value="2">热恋中
                <input type="radio" name="sh" value="3">已婚
                <input type="radio" name="sh" value="4">为人父母
            </div>
            <div class="userexinfo-form-section">
                <P>从行事业：</P>
                <span>
                    <select class="selIns" name="ind_name">
                        <c:set value="${sessionScope.industryList}" var="industryList"/>
                        <c:choose>
                            <c:when test="${empty industryList}">
                                <script>window.location="${path}/IndustryServlet?prom=enrollAud";</script>
                            </c:when>
                            <c:otherwise>
                                <c:forEach var="il" items="${industryList}">
                                    <option>${il.ind_name}</option>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                    </select>
                </span>
            </div>
            <div class="userexinfo-form-section expand-list">
                <p>兴趣：</p>
                <span><input type="text" name="interest" id="interest" placeholder="请输入你的兴趣爱好"></span>
            </div>
            <div class="userexinfo-form-section">
                <P>个性签名：</P>
                <span><input type="text" name="signature" id="signature" placeholder="20个字以内"></span>
            </div>
            <div class="userexinfo-form-section">
                <p>手机号：</p>
                <span>
                    <input type="text" name="phone" onblur="checkPhone()" class="ui-checkbox" placeholder="11个数字" id="mobile">
                </span>
                <span  id="sb" style="color: #ed3931"></span>
            </div>
            <div class="userexinfo-form-section">
                <p>验证码：</p>
                <span>
                    <input type="text" class="ui-checkbox"  id="mobile_code" name="mobile_code">
                    <input type="button" value="获取验证码"  id="btn_mobile_code" onclick="get_mobile_code()">
                </span>
            </div>
            <div class="userexinfo-bottom-section clearfix">
                <input  type="submit" class="form-save-btn" value="注册">
                <p style="position: absolute;left: 215px;top: 5px;width: 114px;">已有账号，请<a href="login.jsp" style="text-decoration: none;color: red">登录</a></p>
            </div>
        </form>
        <p class="p1">
            <input type="checkbox"/>
            我已阅读并同意  <span style="color: red;">《猫眼用户服务协议》</span>
            <span style="color: red;">《隐私政策》</span>
        </p>
        <p>
            客服电话 <span style="color: red;">1010-5335</span>
        </p>

    </div>
</div>
<script>
    //发送验证码
    function get_mobile_code() {
        var phone =  $("#mobile").val().trim();
        if(phone==""||phone==null){
            alert("手机号不能为空号");
            return;
        }else if(checkPhone()){
            alert("改手机号已被注册，请登录")
            return ;
        }else{
           runTime();
           $.post('${path}/MobileCode',{phone:phone},function (msg) {
               if(msg == "2"){
                   alert("发送成功");
               }
           });
       }
    };

    //倒数秒
    var time=59;
    var timeout;
    function runTime() {
        document.getElementById("btn_mobile_code").disabled = true;
        if(time > 0){
            document.getElementById("btn_mobile_code").value=time;
            timeout = setTimeout("runTime()",1000);
            time = time-1;
        }else{
            clearTimeout(timeout);
            time=59;
            document.getElementById("btn_mobile_code").value="获取手机验证码";
            document.getElementById("btn_mobile_code").disabled = false;
        }
    }
    //选中图片-获取-显示图片
    $("#file").change(function () {
        //获取文件名称
        var url=document.getElementById('file').files[0].name;
        $("#moviePirture").attr("src","${path}/images/userAvatar/"+url);
        //获取文件全部路径
        var urlPath=document.getElementById('file').value;
    });
    function check(){
        let name=$("#userexinfo-form-nickname").val();
        let birth=$("#birth").val();
        let interest=$("#interest").val();
        let signature=$("#signature").val();
        let mobile=$("#mobile").val();
        let mobile_code=$("#mobile_code").val();
        let yz=$("#sb").val();
        if (name==""||name==null){
            alert("昵称不能为空");
            return false;
        }else if (birth==""||birth==null){
            alert("生日不能为空");
            return false;
        }else if (interest==""||interest==null){
            alert("兴趣不能为空");
            return false;
        }else if (signature==""||signature==null){
            alert("个性签名不能为空");
            return false;
        }else if(mobile==""||mobile==null){
            alert("手机号不能为空")
            return false;
        }
        else if(mobile_code==""||mobile_code==null){
            alert("验证码不能为空")
            return false;
        }
        if(checkPhone()){
            alert("改手机号已被注册，请登录")
            return false;
        }
        return true;
    }
    let flag=false;
    function checkPhone() {
        let mobile=$("#mobile").val();
        $.post("UserServlet?prom=yz","&phone="+mobile,function (result){
            if(result>0){
                flag= true;
            }else{
                flag= false;
            }
        },"text");
        return flag;
    }
</script>
</body>
</html>
